<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>评论管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form ref="form" :model="formData" label-width="80px" :inline="true"  class="user-search">
            <el-form-item label="评论内容">
                <el-input v-model="formData.name" placeholder="请输入评论内容搜索" size="small"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="getList"
                >搜索</el-button
                >
            </el-form-item>
        </el-form>
        <el-table 
            size="small" 
            :data="tableData" 
            highlight-current-row 
            stripe
            height="550"
            v-loading="tableLoading" 
            border 
            element-loading-text="拼命加载中" 
            style="width: 100%;">
            <el-table-column 
                align="center" 
                type="index" 
                width="60">
            </el-table-column>
            <el-table-column
                prop="user_id" 
                label="用户邮箱">
            </el-table-column>
            <el-table-column
                prop="userName" 
                label="用户名">
            </el-table-column>
            <el-table-column
                prop="meName" 
                label="机构名称">
            </el-table-column>
            <el-table-column
                prop="tel" 
                label="用户电话">
            </el-table-column>
            <el-table-column
                prop="comment_content" 
                label="评论内容">
            </el-table-column>
            <el-table-column
                prop="create_time" 
                v-slot="{row}"
                label="评论内容">
                <div>{{ row.create_time | timestampToTime }}</div>
            </el-table-column>
            <el-table-column 
                v-slot="{row}"
                align="center" 
                label="操作" 
                min-width="300">
                <template >
                    <el-button 
                        size="mini" 
                        type="danger" @click="deleteUser(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { commentInfo,commentDelete } from "../../api/api";
export default {
    data(){ 
        return { 
            formData: {
                name: ''
            },
            tableLoading: false,
            tableData: [],
        }
    },
    methods: { 
        reset()  {

        },
        async getList(){ 
            try{ 
                this.tableLoading = true
                const data = await commentInfo({})
                if(!data.success) return this.$message.error('系统繁忙')
                this.tableData = data.data
            }catch(e) { 
                console.log(e);
            }finally{ 
                this.tableLoading = false
            }
        },
        deleteUser(data) {
      this.$confirm("确定要删除吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          commentDelete(data.cid)
            .then((res) => {
              if (res.success) {
                this.$message({
                  type: "success",
                  message: "评论已删除!",
                });
                this.getList(this.formData);
              } else {
                this.$message({
                  type: "info",
                  message: res.msg,
                });
              }
            })
            .catch((err) => {
              this.loading = false;
              this.$message.error("评论信息删除失败，请稍后再试！");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
        }
    },
    mounted() { 
        this.getList()
    }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
</style>